import React from 'react';
import { Tag, Icon } from 'antd';
import EmployeeSelectModal from './EmployeeSelectModal';
import styles from './EmployeeSelect.less';

// [DELETE] 半成品, 没有实际的业务在使用
const EmployeeSelect = ({ placeholder, maxCount, disableArr, style, onChange }) => {
    const [visible, setVisible] = React.useState(false);
    const [result, setResult] = React.useState([]);

    const setNowResult = arr => {
        setResult(arr);
        if (onChange) {
            onChange(arr);
        }
    };

    const handleOk = res => {
        setNowResult(res);
    };

    const handleClose = (e, index) => {
        e.stopPropagation();
        const arr = [...result];
        arr.splice(index, 1);
        setNowResult(arr);
    };

    const handleClear = e => {
        setNowResult([]);
        e.stopPropagation();
    };

    return (
        <div className={styles.employeeSelectWrap} style={style}>
            <div className="ant-input" onClick={() => setVisible(!visible)}>
                {result.length > 0 && (
                    <>
                        <div className={styles.tagWrap}>
                            {result.map((item, index) => (
                                <Tag key={item.employeeName || item.name} closable onClose={e => handleClose(e, index)}>
                                    {item.employeeName || item.name}
                                </Tag>
                            ))}
                        </div>
                        <Icon
                            className={styles.clearIcon}
                            type="close-circle"
                            theme="filled"
                            onClick={e => handleClear(e)}
                        />
                    </>
                )}
                {placeholder && result.length <= 0 && <span className={styles.placeholderStyle}>{placeholder}</span>}
            </div>
            <EmployeeSelectModal
                value={result}
                maxCount={maxCount}
                disableArr={disableArr}
                visible={visible}
                setVisible={setVisible}
                onOk={handleOk}
            />
        </div>
    );
};

EmployeeSelect.defaultProps = {
    placeholder: '请选择',
    maxCount: 5,
    onChange: a => {
        console.log(a);
    }
};

export default EmployeeSelect;
